<!-- 首页 -->
<template>
	<view>
		<u-navbar :placeholder='true' :isBack='hasBaby' :titleBold='true' backIconSize='30'
			:background="{ background: '#f8f8f8' }" :border-bottom="false">
			
			<view  class="u-nav-slot"  slot="left" style="display: flex;" @click="linkToRelease">
				
				<view class=""
					v-if="hasBaby"
					style="width: 70rpx;height: 70rpx;border-radius: 50%;text-align: center;line-height: 70rpx;">
					<image src="../../../static/app_avatar_student_boy.png" class='avatar' alt=""
						v-if="childrenObj.userSex == '0'">
						
					<image src="../../../static/app_avatar_student_girl.png" class='avatar' alt="" v-else>
				</view>
				<view v-if="hasBaby" class="" style="margin-left: 10rpx;">
					<view class="" style="display: flex;">
						<text
							style="font-weight: bold;letter-spacing: 2rpx;vertical-align: middle;">{{childrenObj.userName}}</text>
						<u-icon name="play-right-fill" size="10"
							style="vertical-align: middle;margin-left: 20rpx;"></u-icon>
					</view>
					<view class="" style="font-size: 12px;color: #9f9f9f;letter-spacing: 2rpx;">
						{{childrenObj.className}}
					</view>
				</view>
			</view>

			<!-- <view class="u-nav-slot" slot="right" style="display: flex;">
				<view class="iconfont icon-dakaqiandao" style="color: rgb(239, 155, 62);width: 45px;font-size: 25px;">
				</view>
				<view class="iconfont icon-laba_laba" style="color: rgb(0, 0, 0);font-size: 25px;width: 45px;"></view>
				<u-icon name="plus" size="25" style="vertical-align: middle;"></u-icon>
			</view> -->

			<!-- <view class="slot-wrap" slot="right"><u-icon name="camera-fill" size="30" @click="linkToRelease"></u-icon></view> -->
		</u-navbar>
		<view class="uni-padding-wrap" style="margin-top: 15rpx;">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" style="" circular="true" indicator-dots="true" autoplay="true"
						interval="3500" duration="600">
						<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
							<view class="swiper-item uni-bg-red">
								<image class="swiper-img" :src="item" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<!-- 流量主-腾讯广告 -->
		<!-- <ad unit-id="adunit-961458988ac9ad8b" ad-intervals="30"></ad> -->

		<!-- 导航栏 -->
		<view v-if="categories.length" class="cu-list grid solids-bottom col-4 no-border" style="margin-top: 10rpx;">
			<view class="cu-item" v-for="(item, index) in categories" :key="index"
				:style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]" @click="goCategorieslist(item.url)">
				<view :class="['iconfont iconfontStyle '+item.icon]" :style='{background:item.iconBg}'>
				</view>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="noApp" v-else>
			---暂无授权应用---
		</view>

		<!-- <view class="message-box">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper style="height: 120rpx;" class="swiper" vertical="ture" circular="true"
						indicator-dots='false' indicator-color="rgba(0,0,0,.0)" indicator-active-color="rgba(0,0,0,.0)"
						autoplay="true" interval="4000">
						<swiper-item class="swiper-list" v-for="(item, index) in messageData" :key="index">
							<view class="message-tltle">{{item.title}}</view>
							<view class="message-content"><span>{{item.tag}}</span>{{item.content}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view> -->

		<!-- <view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">热门视频</text>
				<text class="text-ABC text-blue">curriculum</text>
			</view>
			<view class="action" @click="goVideo"><text class="text-lg text-grey text-shadow">更多</text></view>
		</view> -->

		<!-- <view class="skill-sequence-panel-content-wrapper">
			
			<view class="hide-content-box hide-content-box-left"></view>
			
			<view class="hide-content-box hide-content-box-right"></view>
			<scroll-view scroll-x="true" class="kite-classify-scroll">
				<view class="kite-classify-cell shadow" v-for="(item, index) in curriculum" :key="index">
					<view :class="'nav-li bg-index' + (index + 1)">
						<view class="nav-name">{{ item.name }}</view>
					</view>
					<view class="nav-content">{{ item.content }}</view>
					<view @click="goVideo" class="nav-btn shadow" :class="'bg-index' + (index + 1)">立即观看</view>
				</view>
			</scroll-view>
		</view> -->
		<!-- <view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">开源项目</text>
				<text class="text-ABC text-blue">curriculum</text>
			</view>
			<view class="action" @click="goProjectList"><text class="text-lg text-grey text-shadow">更多</text></view>
		</view> -->

		<view class="cu-card case no-card">
			<view @click="goProject(item.id)" class="cu-item shadow" v-for="(item, index) in projectList" :key="index">
				<view class="image">
					<image :src="item.tImg" mode="widthFix"></image>
					<view class="cu-tag bg-gradual-orange">{{ item.tabs }}</view>
					<view class="cu-bar bg-shadeBottom">
						<text class="text-cut">{{ item.type }}</text>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="margin-lr flex-sub">
							<view class="item-name text-grey text-lg">{{ item.title }}</view>
							<view class="text-gray text-sm flex justify-between">
								{{ item.time }}
								<view class="text-gray text-sm">
									<text class="icon-attentionfill margin-lr-xs"></text>
									{{ item.user[0].read }}
									<text class="icon-appreciatefill margin-lr-xs"></text>
									{{ item.user[0].like }}
									<text class="icon-shopfill margin-lr-xs"></text>
									{{ item.user[0].use }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<u-popup :show="show" @close="close" @open="open" mode="center" :closeable="true" round="15">
				<view style="width: 600rpx;height: 600rpx;">
					<view class="" style="margin-top: 60rpx;padding: 0 30rpx;display: flex;">
						<view class="iconfont icon-qiehuan" style="font-size: 20px;vertical-align: middle;"></view>
						<text
							style="vertical-align: middle;font-weight: bold;letter-spacing: 1rpx;vertical-align: middle;margin-left: 20rpx;">切换宝贝</text>
					</view>
					<view class="grace-title childrenlist" v-for="(item1,index1) in childrenList" :key="index1"
						v-if="item1" @click="select(index1)">
						<text>{{item1.userName}}</text>
						<u-icon name="checkbox-mark" size="25" color="#1cb8a7" v-if="index1==number"></u-icon>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getStudent
	} from '@/api/child.js';
	import {
		getByApp
	} from '@/api/menu.js'
	import {
		dictList, //字典项
	} from '@/api/user.js'
	// 获取学校详情
	import {
		schoolInfo, //学校详情
	} from '@/api/school.js'
	// import request from '@/common/request.js';
	import uPopup from "@/uni_modules/uview-ui/components/u-popup/u-popup.vue";
	import addTip from '@/components/wxcomponents/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
	export default {
		components: {
			addTip,
			uPopup
		},
		data() {
			return {
				tip: '点击「添加小程序」，下次访问更便捷',
				duration: 1,

				scrollTop: 0,
				old: {
					scrollTop: 0
				},

				bannerList: [
				],
				categories: [],
				messageData: [{
						title: '孩子成长，我放心倍加呵护，成长起步。',
						tag: '招生',
						content: '智力幼儿园正在火热招生中'
					},
					{
						title: '蓓博幼儿园，梦想领进门！',
						tag: '公告',
						content: '幼儿入学须知'
					}
				],
				curriculum: [{
						name: '智力幼儿园',
						content: '智力幼儿园招生视频...'
					},
					{
						name: '蓓博幼儿园',
						content: '蓓博幼儿园招生视频...'
					},
					{
						name: '太子幼儿园',
						content: '太子幼儿园招生视频...'
					},
					{
						name: '幼儿之家',
						content: '幼儿之家招生视频...'
					},
					{
						name: '阳光之家',
						content: '阳光之家招生视频...'
					}
				],
				projectList: [],
				show: false,
				childrenList: [],
				number: 0,
				childrenObj: {

				},
				loginType: "",
				mytoken: '',
				isShowModel: true,
				hasBaby:false
			};
		},
		watch: {},
			
		onShow(){
			
		},
		//下拉刷新
		async onPullDownRefresh() {
			this.getData();
			await this.tablelist();
			uni.stopPullDownRefresh();
		},
		onLoad(op) {
		
					
	
			// 		if(op.loginType!=uni.getStorageSync('loginType')||JSON.stringify(this.$util.getUser())=='{}'){
			// 			uni.navigateTo({
			// 				url:'/pages/login/index'
			// 			})
			// 		}else{
						
			// 		}
			
				
			// 	uni.setStorageSync('loginType', op.loginType)
				this.dictList();
				this.tablelist();
				this.getData();
				// 获取登录类型
				this.loginType = uni.getStorageSync('loginType')
				// #ifdef MP-WEIXIN
				this.get()
				// #endif
				// 获取banner
				this.getBanner(this.$util.getUser().schoolId)
				console.log('获取用户信息',this.$util.getUser())
			
			
		},
		methods: {
			// 获取学校详情
			async getBanner(id){
				const {data}=await schoolInfo(id)
				// console.log('datassss',data.data.detailsPhoto.split(','))
				if(data.code==0){
					if(data.data.detailsPhoto.length){
						this.bannerList=data.data.detailsPhoto.split(',')
					}else{
						this.bannerList=['https://child.xjtgzh.com/file/uploadFile/img/1670663153863479296/045dfcb02ac00ab638aecdd15c0724f6.jpeg']
					}
					
				}
			},
			// 用户授权订阅消息
			get() {
				let tmplIds=[];
				if(this.loginType=='0'){
					tmplIds = [
						'3l0KXVLYez9GjK5r9HeMtT3yURP4850kZ1p3SGR-OCo',//请假通知
						// "SVvjYKgkqHniPdfbYz27U55VKB4S9ZAXO-G-bZcSl2c"
					]
				}else{
					tmplIds = [
						'3l0KXVLYez9GjK5r9HeMtT3yURP4850kZ1p3SGR-OCo'//到校离校通知
					]
				}
				
				// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
				wx.getSetting({
					withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
					success: function(res) {
						console.log('打印授权', res)
						// 调起授权界面弹窗
						if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
							if (res.subscriptionsSetting.itemSettings !=
								null) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
								let noTmpId=[];
								tmplIds.forEach(it=>{
									console.log('res.subscriptionsSetting.itemSettings[id]',res.subscriptionsSetting.itemSettings[it])
									if(!res.subscriptionsSetting.itemSettings[it]){
										noTmpId.push(it)
									}
								})
								if(noTmpId.length){
									wx.showModal({
										title: '提示',
										content: '请授权开通服务通知',
										showCancel: true,
										success: function(ress) {
											if (ress.confirm) {
												wx.requestSubscribeMessage({ // 调起消息订阅界面
													tmplIds: noTmpId,
													success(res) {
														console.log('订阅消息 成功 ');
														console.log(res);
													},
													fail(er) {
														console.log("订阅消息 失败 ");
														console.log(er);
													}
												})
									
											}
										}
									})
								}
								
								
							} else {
								// 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
								wx.showModal({
									title: '提示',
									content: '请授权开通服务通知',
									showCancel: true,
									success: function(ress) {
										if (ress.confirm) {
											wx.requestSubscribeMessage({ // 调起消息订阅界面
												tmplIds: tmplIds,
												success(res) {
													console.log('订阅消息 成功 ');
													console.log(res);
												},
												fail(er) {
													console.log("订阅消息 失败 ");
													console.log(er);
												}
											})

										}
									}
								})
							}

						} else {
							console.log('订阅消息未开启')
						}
					},
					fail: function(error) {
						console.log(error);
					},
				})


			},
			async tablelist() {
				this.categories = []
				const {data}=await getByApp()
				if (data.code == '0') {
					console.log('返回结果',data.data)
					// {
					// 		icon: 'icon-qiandao-m',
					// 		iconBg: 'linear-gradient(139deg,rgba(149, 123, 247,1) 0%,rgba(118, 125, 247,1) 100%)',
					// 		show: false,
					// 		limit: '', //权限Id
					// 		name: '宝贝考勤'
					// 	}
					data.data[0].children.forEach(it => {
						if (it.type == '1') {
							this.categories.push({
								icon: it.icon,
								iconBg: it.iconBg ? it.iconBg :
									'linear-gradient(139deg,rgba(149, 123, 247,1) 0%,rgba(118, 125, 247,1) 100%)',
								name: it.title,
								url: it.jump
				
							})
						}
				
					})
				} else {
					this.$api.showTip(data.msg)
				}		
				
			},
			dictList() {
				dictList().then(
					res => {
						if (res.data.code == '0') {
							this.$util.setdictionary(res.data.data);
						} else {
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
				);
			},
			linkToRelease() {
				console.log('3333')
				this.show = true
			},
			select(index) {
				this.number = index;
				this.$util.setChild(this.childrenList[this.number]);
				this.childrenObj = this.$util.getChild();
			},
			// 根据家长id查询学生
			async getData() {
				this.childrenList=[]
				uni.removeStorageSync('childInfo')
				const {
					data
				} = await getStudent()
				console.log('打印返回', data)
				if (data.code == 0) {
					if(data.data.length){
						this.hasBaby=true
						data.data.map((it, li) => {
							this.childrenList.push(it);
							return it;
						})
						if (!this.$util.getChild().userId) {
							this.$util.setChild(this.childrenList[this.number]);
						} else {
							this.childrenList.forEach((ui, oi) => {
								if (ui.userId == this.$util.getChild().userId) {
									this.number = oi
								}
							})
						}
						this.childrenObj = this.$util.getChild();
						console.log('lllllllllllsss',this.childrenObj)
					}else{
						this.hasBaby=false
					}
					
				}
			},

			scroll: function(e) {
				console.log(e);
				this.old.scrollTop = e.detail.scrollTop;
			},
			goCategorieslist: function(url) {
				if(url == '/pages/subPack/pickUp/add' && this.loginType == '0'){
					uni.navigateTo({
						url: '/pages/subPack/pickUp/list?type=0'
					})
					
					return;
				}
				uni.navigateTo({
					url: url
				})
			},
			goProjectList() {
				uni.navigateTo({
					url: '../project/list'
				});
			},
			goProject(id) {
				uni.navigateTo({
					url: '../project/project?proId=' + id
				});
			},
			goVideo() {
				uni.navigateTo({
					url: '../video'
				});
			},

			open() {
				// console.log('open');
			},
			close() {
				this.show = false 
				// console.log('close');
			}
		}
	};
</script>
<style lang="scss" scoped>
	.avatar {
		width: 35px;
		height: 35px;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.iconfontStyle {
		font-size: 46rpx;
		width: 90rpx;
		height: 90rpx;
		margin: 0 auto 10rpx;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		border-radius: 38rpx;
		box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2)
	}

	.message-box {
		width: 100%;
		height: 120rpx;
		background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100rpx 100rpx;
		background-position: 15rpx 10rpx;
		margin: 10rpx 0rpx 10rpx 0rpx;
		padding-left: 130rpx;

		.message-tltle {
			height: 65rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: 28rpx;
		}

		.message-content {
			color: #0081ff;

			span {
				background-color: #0081ff;
				color: #FFFFFF;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		height: 380rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 266rpx;
		height: 370rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.nav-li {
		padding: 40rpx 30rpx;
		width: 100%;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: '';
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: '';
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-content {
		width: 100%;
		padding: 15rpx;
		display: inline-block;
		overflow-wrap: break-word;
		white-space: normal;
	}

	.nav-btn {
		width: 200rpx;
		height: 60rpx;
		margin: 8rpx auto;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
	}

	.bg-index1 {
		background-color: #19cf8a;
		color: #fff;
	}

	.bg-index2 {
		background-color: #954ff6;
		color: #fff;
	}

	.bg-index3 {
		background-color: #5177ee;
		color: #fff;
	}

	.bg-index4 {
		background-color: #f49a02;
		color: #fff;
	}

	.bg-index5 {
		background-color: #ff4f94;
		color: #fff;
	}

	.bg-index6 {
		background-color: #7fd02b;
		color: #fff;
	}

	.item-name {
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.childrenlist {
		padding: 20rpx 30rpx;
		height: 50rpx;
		margin-top: 30rpx;
		letter-spacing: 1rpx;
		font-weight: 500;
	}

	.grace-title {
		display: flex;
		flex-wrap: nowrap;
		font-size: 28rpx;
		justify-content: space-between;
		font-weight: normal;
		align-items: center;
	}

	.grace-title1 {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		font-weight: normal;
		align-items: center;
	}

	.noApp {
		margin: 200rpx auto;
		text-align: center;
		color: #888;
	}
</style>